import React from 'react';
import { Card, Descriptions, Button } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { createStyles } from 'antd-style';
import { PageContainer } from '@ant-design/pro-components';
import CustomPageContainer from '@/components/CustomPageContainer';
const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    margin: '0 auto',
  },
  formContainer: {
    maxWidth: '800px',
    width: '100%',
    margin: '0 auto',
    padding: '32px',
    background: '#fff',
    borderRadius: '8px',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
  },
  title: {
    fontSize: '16px',
    fontWeight: 'bold',
    color: '#1890ff',
    borderBottom: '2px solid #1890ff',
    paddingBottom: '8px',
    marginBottom: '24px',
  },
  descriptions: {
    marginTop: '24px',
    '& .ant-descriptions-item-label': {
      fontWeight: 500,
      color: '#333',
      width: '120px',
      backgroundColor: '#fafafa',
    },
    '& .ant-descriptions-item-content': {
      color: '#666',
    },
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '16px',
    marginTop: '32px',
  },
  button: {
    width: '120px',
    height: '36px',
    borderRadius: '4px',
    fontSize: '14px',
  },
}));

const UserManageView: React.FC = () => {
  const { styles } = useStyles();
  const location = useLocation();
  const navigate = useNavigate();
  const record = location.state?.record || {};

  const formatStatus = (status: number) => {
    return status === 0 ? '启用' : '禁用';
  };

  const formatSex = (sex: number) => {
    return sex === 0 ? '男' : '女';
  };

  const formatIsDeleted = (isDeleted: number) => {
    return isDeleted === 0 ? '否' : '是';
  };

  return (
    <CustomPageContainer>
      <Card>
        <div className={styles.formContainer}>
          <div className={styles.title}>用户详情</div>
          <Descriptions
            bordered
            column={1}
            className={styles.descriptions}
            size="middle"
          >
            <Descriptions.Item label="用户名">{record.userName}</Descriptions.Item>
            <Descriptions.Item label="姓名">{record.name}</Descriptions.Item>
            <Descriptions.Item label="性别">{formatSex(record.sex)}</Descriptions.Item>
            <Descriptions.Item label="生日">{record.birthday}</Descriptions.Item>
            <Descriptions.Item label="地址">{record.address}</Descriptions.Item>
            <Descriptions.Item label="手机号">{record.phone}</Descriptions.Item>
            <Descriptions.Item label="电子邮箱">{record.email}</Descriptions.Item>
            <Descriptions.Item label="账号状态">{formatStatus(record.status)}</Descriptions.Item>
            <Descriptions.Item label="是否删除">{formatIsDeleted(record.isDeleted)}</Descriptions.Item>
            <Descriptions.Item label="部门">{record.departmentName}</Descriptions.Item>
            <Descriptions.Item label="岗位">{record.positionName}</Descriptions.Item>
          </Descriptions>
          <div className={styles.buttonGroup}>
            <Button
              className={styles.button}
              onClick={() => navigate('/system/usermanage')}
            >
              返回
            </Button>
          </div>
        </div>
      </Card>
    </CustomPageContainer>
  );
};

export default UserManageView;
